<extend name="Base/common" />

<block name="style">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Api/css/order.css">
</block>

<block name="Content">

<div class="page-group">
    <div class="page page-current">
        <div class="content personal-info">
            <!--个人资料主体内容-->
            <div class="list-block">
                <ul>
                    <li>
                        <a href="#" class="item-link item-content" id="chooseImage">
                            <div class="item-inner">
                                <div class="item-title">头像</div>
                                <div class="item-media">
                                    <img src="{$userModel['fullpath']|default='__PUBLIC__/Api/images/person1.png'}" alt="">
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gender">
                        <a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title label">昵称</div>
                                <div class="item-input">
                                    <input type="text" name="name" id="name" value="{$userModel['username']}" maxlength="10"
                                    	placeholder="请输入昵称 （最长不超过10个字哦）">
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="gender">
                        <a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title label">性别</div>
                                <div class="item-input">
                                    <input type="text" placeholder="男" id="picker" 
                                    	value="<if condition='$userModel[sex] eq 1'>男<else/>女</if>" readonly>
                                </div>
                            </div>
                        </a>
                        <div class="picker-modal picker-columns  remove-on-close modal-in" style="display:none;">
                            <div class="picker-modal-inner picker-items">
                                <div class="picker-items-col picker-items-col-center picker-items-col-normal">
                                    <div class="picker-items-col-wrapper" style="transform: translate3d(0px, -54px, 0px);">
                                        <div class="picker-item" data-picker-value="男">男</div>
                                        <div class="picker-item" data-picker-value="女">女</div>
                                    </div>
                                </div>
                                <div class="picker-center-highlight">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="{:U('User/updateAccount')}" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">手机号</div>
                                <div class="right phone-number">{$userModel['account']}</div>
                            </div>
                        </a>
                    </li>
                </ul>
                <div class="confirm">
                    <a class="button button-fill button-big" type="button" onclick="update()">确定</a>
                    <input type="hidden" name="media_id" id="media_id" value=""/>
                </div>
            </div>
        </div>
    </div>
</div>

</block>

<block name="script">
<script src="__PUBLIC__/Api/js/order.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">

getJsApiConfig();

function getJsApiConfig() {
    var url = window.location.href.split('#')[0];
    
    $requestURL = Think.U('WeChatApi/getApiConfig');

    $.post($requestURL, {currentURL:url}, function(data){
		
    	if (data.status == 1) {
    		
    		var token = data.info.token;
    		
    		wx.config({
    		      debug: false,
    		      appId: data.info.appid,
    		      timestamp: data.info.timestamp,
    		      nonceStr: data.info.nonceStr,
    		      signature: data.info.signature,
    		      jsApiList: [
    		        'getNetworkType',
    		        'chooseImage',
    		        'uploadImage'
    		      ]
    		});

    		wx.ready(function () {

    			var images = {localId: [], serverId: []};
    			
    			document.querySelector('#chooseImage').onclick = function () {
    				wx.chooseImage({
    					count:1,								//上传图片数量
    					success: function (res) {
    						images.localId = res.localIds;
    						$("#chooseImage").find('img').attr('src', res.localIds[0]);
    						upload();
    					}
    				});
    			};

    			function upload() {
    				
    				var imgHTML = '';
    				var ajaxDownloadURL = Think.U('Orders/ajaxDownLoad');
    				
    				wx.uploadImage({
    					localId: images.localId[0] + '',
    					success: function (res) {
   							$.toast('已成功上传头像');
   							var serverId = res.serverId; 	//返回图片的服务器端ID
   							$("#media_id").val(serverId);
   							
    					},
    					fail: function (res) {
    						alert(JSON.stringify(res));
    					}
    				});
    			}
    		})
		}else{
			
			alert(data.msg);
		}
	});
}

function update(){
	
	var mediaID = $("#media_id").val();
	var name = $("#name").val();
	var sex = $("#picker").val();
	var target = Think.U('User/ajax_update');
	
	$.post(target, {'media_id':mediaID, 'name':name, 'sex':sex}, function(data){
		
		if(data.status == '-201'){
			$.alert('身份认证已失效，请重新登录', function () {
		        window.location.href = Think.U('Public/login');
		    });
		}else if(data.status == 0){
			$.alert('操作失败', function () {
		        window.location.href = Think.U('Public/login');
		    });
		}else if(data.status == 1){
			$.toast('修改成功');
			window.location.href = Think.U('User/index');
		}
	});
	
}

</script>
</block>

